<template>
  <div class="container_width common_wrap">
    <el-divider>标准公告</el-divider>
    <el-tabs
      v-model="tabsActive"
      type="border-card"
      class="box-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index"
        :label="item.label"
        :name="item.name"
      >
        <el-table
          :data="tableData"
          :header-cell-style="{ 'background-color': '#2f74d3', color: '#fff' }"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="standardNoticeNo" label="公告编号" width="230">
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/notice/detail', scope.row.standardNoticeNo)"
              >
                {{ scope.row.standardNoticeNo }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="standardType" label="公告类型" width="180">
          </el-table-column>
          <el-table-column prop="title" show-overflow-tooltip label="公告名称">
            <template slot-scope="scope">
              <div
                class="pointer text-hidden"
                @click="goPath('/notice/detail', scope.row.standardNoticeNo)"
              >
                {{ scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="publishDate" label="发布时间" width="150">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <div class="pagination_wrap">
        <div>
          共<span class="num_color"> {{ total }} </span>条记录
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout=" sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-tabs>
  </div>
</template>
<script>
import { standardNotices } from "@/api/home.js";
export default {
  name: "Notice",
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      tabsActive: "0",
      tabList: [
        { label: "国家标准公告", name: "0" },
        { label: "行业标准公告", name: "8" },
        { label: "地方标准公告", name: "9" },
      ],
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let params = {
        pageNo: this.pageNo - 1,
        pageSize: this.pageSize,
        noticeType: this.tabsActive,
      };
      standardNotices(params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.content;
          this.total = res.data.totalElements;
        }
      });
    },
    handleClick(tab) {
      this.pageNo = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    goPath(path, no) {
      this.$router.push({
        path,
        query: {
          no,
        },
      });
    },
  },
};
</script>

<style lang="scss"></style>
